<script setup lang="ts">
import {
  ElButton,
  ElInput,
  ElDatePicker,
  ElPagination,
  ElTable,
  ElTableColumn,
  TableColumnCtx,
  type DateModelType
} from 'element-plus'
import { merge } from 'lodash-es'
import { Plus } from '@element-plus/icons-vue'
import { getReservationRefundsListApi } from '@/api/reservation-refund'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { Search, SearchItem } from '@/components/Search'
import { ReservationRefund } from '@/api/reservation-refund/types'
import { boolean2string, formatDate, formatNumber } from '@/utils'

defineOptions({
  name: 'ReservationRefund'
})

const { push } = useRouter()
const data = ref<ReservationRefund[]>([])
const totalAmount = ref(0)

interface Conditions {
  openid: string
  dates: [DateModelType, DateModelType]
  room: string
  confirm_number: string
}

const conditions = reactive<Conditions>({
  openid: '',
  dates: [dayjs().add(-30, 'days').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')],
  room: '',
  confirm_number: ''
})

const formatSearchParams = (data: Conditions) => {
  return {
    openid: data.openid,
    begin_date: data.dates[0],
    end_date: data.dates[1],
    room: data.room,
    confirm_number: data.confirm_number
  }
}

const WxPrepayPaidStatus = {
  Waiting: '待支付',
  Terminated: '终止支付',
  Success: '支付成功'
}

const tableObject = reactive({
  total: 0,
  pageSize: 10,
  pageIndex: 1
})

const getData = async () => {
  data.value = []

  const res = await getReservationRefundsListApi(
    merge(formatSearchParams(conditions), tableObject, { order: '-created_at' })
  )
  if (res) {
    data.value = res.data.rows
    tableObject.total = res.data.count
  }
}

interface SummaryMethodProps<T = ReservationRefund> {
  columns: TableColumnCtx<T>[]
  data: T[]
}

const getSummaries = (param: SummaryMethodProps) => {
  const { columns } = param
  const sums: string[] = new Array(columns.length).fill('')
  sums[0] = '总计'
  sums[3] = formatNumber(totalAmount.value)

  return sums
}

const DownloadAction = () => {
  push('/geography/region-add')
}

getData()
</script>

<template>
  <Search :model="conditions" @search="getData" @reset="getData">
    <SearchItem label="日期" prop="nickname">
      <ElDatePicker
        v-model="conditions.dates"
        type="daterange"
        value-format="YYYY-MM-DD"
        :clearable="false"
      />
    </SearchItem>
    <SearchItem label="房号" prop="room">
      <ElInput v-model="conditions.room" maxlength="50" clearable />
    </SearchItem>
    <SearchItem label="确认号" prop="confirm_nnumber">
      <ElInput v-model="conditions.confirm_number" maxlength="50" clearable />
    </SearchItem>
    <SearchItem label="小程序id" prop="openid">
      <ElInput v-model="conditions.openid" maxlength="50" clearable />
    </SearchItem>
  </Search>

  <div class="mt-10px bg-white p-20px">
    <div class="mb-10px flex flex-row justify-between">
      <div>列表</div>
      <div class="flex flex-row items-center">
        <ElButton :icon="Plus" type="primary" @click="DownloadAction">下载</ElButton>
        <Icon icon="ep:refresh-right" class="mr-8px ml-8px cursor-pointer" />
      </div>
    </div>

    <ElTable :data="data" stripe row-key="id" :summary-method="getSummaries" show-summary>
      <ElTableColumn prop="confirm_number" label="确认号" width="120" show-overflow-tooltip />

      <ElTableColumn label="微信支付/退款单号" width="280" show-overflow-tooltip>
        <template #default="{ row }">
          <p>{{ row.wx_transaction_id }}</p>
          <p>{{ row.refund_id }}</p>
        </template>
      </ElTableColumn>

      <ElTableColumn
        prop="member_number"
        label="商户支付/退款单号"
        width="280"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <p>{{ row.out_trade_no }}</p>
          <p>{{ row.out_refund_no }}</p>
        </template>
      </ElTableColumn>

      <ElTableColumn
        label="退款金额"
        width="100"
        align="right"
        header-align="right"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          {{ formatNumber(row.refund_amount) }}
        </template>
      </ElTableColumn>

      <ElTableColumn label="退款状态" width="90" show-overflow-tooltip>
        <template #default="{ row }">
          {{ WxPrepayPaidStatus[row.prefund_status] }}
        </template>
      </ElTableColumn>

      <ElTableColumn
        prop="reason"
        label="退款原因"
        width="auto"
        min-width="140"
        show-overflow-tooltip
      />

      <ElTableColumn
        label="PMS入账"
        width="90"
        align="center"
        header-align="center"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          {{ boolean2string(row.is_pms_posted) }}
        </template>
      </ElTableColumn>

      <ElTableColumn
        prop="reference"
        label="备注"
        width="auto"
        min-width="140"
        show-overflow-tooltip
      />

      <ElTableColumn
        prop="user_received_account"
        label="退款入账账户"
        width="140"
        show-overflow-tooltip
      />

      <ElTableColumn label="退款时间" width="200" show-overflow-tooltip>
        <template #default="{ row }">
          {{ formatDate(row.success_time, 'YYYY-MM-DD HH:mm') }}
        </template>
      </ElTableColumn>

      <ElTableColumn prop="openid" label="小程序id" width="260" show-overflow-tooltip />
    </ElTable>

    <ElPagination
      v-model:current-page="tableObject.pageIndex"
      v-model:page-size="tableObject.pageSize"
      class="mt-10px"
      :total="tableObject.total"
      :background="true"
      layout="sizes, prev, pager, next, jumper, ->, total"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      @size-change="getData"
      @current-change="getData"
    />
  </div>
</template>
